@charset "utf-8";
//头部
#header {
  height: 44px;
  background-color: #ff8b00;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 2px 3px #dddddd;
  >.content {
    padding: 0 8px;
    > .back {
      position: absolute;
      left: 20px;
      bottom: 0px;
      font-size: 24px;
      font-weight: normal;
      line-height: 44px;
      color: #FFFFFF;
    }
  ;
    >h3 {
      margin: -10px;
      text-align: center;
      font-size: 20px;
      line-height: 44px;
      color: #ffffff;
      font-weight: 400;

    };
  }
};
// Coudan页面
.coudan {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif !important;
  >.list {
    background-color: #FFFFFF;
    >.l-top{
      position: relative;
        height: 38px;
        display: -webkit-box;
     >.filter {
       width: 100%;
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-flex: 1;
         border-bottom: 1px solid #dadada;
         >ul{
           width: 100%;
            >li {
              float: left;
              line-height: 37px;
              width: 33%;
              display: -webkit-box !important;
              //display: box !important;
              position: relative;
              -webkit-box-flex: 1;
              box-flex: 1;
              box-sizing: border-box;
              >a {
                color:  #5a5a5a;
                display: -webkit-box !important;
                //display: box !important;
                position: relative;
                width: 100%;
                font-size: 16px;
                text-align: center;
                -webkit-box-align: center;
                box-align: center;
                -webkit-box-pack: center;
                box-pack: center;
                //>span {
                //  color: #666666;
                //  font-size: 14px;
                //  line-height: 38px;
                //  vertical-align: middle;
                //  margin-left: 5px;
                //}
                >i {
                  display: inline-block;
                  width: 24px;
                  height: 24px;
                  vertical-align: middle;
                  background-image: url("../images/down.svg");
                  background-repeat: no-repeat;
                  background-size: 24px 24px;
                  background-position: center center;
                }
              };


            };
           >li.on i{
             background-image: url("../images/up.svg") !important;
           }

         };
      };
      >.search {
        width: 46px;
        height: 100%;
        >i {
          display: inline-block;
          width: 38px;
          height: 38px;
          border: 1px solid #dadada;
          border-top: none;
          border-right: none;
          background-image: url("../images/search.png");
          background-size: 28px 28px;
          background-repeat: no-repeat;
          background-position: center center;
        }
        &.on i{
          background-image: url("../images/X.svg") !important;
        }
      };
      >.popbox {
        width: 100%;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 10;
        background-color: #f7f7f7;
        box-shadow: 0px 3px 6px #dddddd;
        //display: none;
          >ul{
            margin: 0;
            >li{
                border-bottom: 1px solid #dadada;
              position: relative;
              >a{
                color:  #5a5a5a;
                display: block;
                line-height: 40px;
                padding: 0 10px;
                >i{

                }
              }
            }
            >.on{
              display: block;
              z-index: 10;
            };
            >.on::before{
              content: "";
              display: block;
              width: 20px;
              height: 20px;
              background-image: url("../images/on.svg");
              background-repeat: no-repeat;
              -webkit-background-size: 20px auto;
              position: absolute;
              right: 15px;
              top: 50%;
              margin-top: -10px;
            };
          }
      };
      >.popsort {
          display: none;
      };
      >.popprice {
          display: none;
      };
      >.popcat{
          display: none;
      };
      >.popsearch {
        display: none;
        padding: 10px 0px;
        background-color: #f7f7f7;
        >.formsch {
          padding-bottom: 10px;
          position: relative;
          >.txt {
            width: 100%;
            margin-left: 10px;
            padding-right: 55px;
            >input[type="search"] {
              padding: 0px 26px;
              height: 35px;
              font-size: 14px;
              background: url("../images/search%201.png");
              background-color: #ffffff;
              -webkit-background-size: 16px 16px;
              background-size: 16px 16px;
              background-repeat: no-repeat;
              background-position: 8px center;
              -webkit-appearance: none;
              width: 100%;
              -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
              line-height: normal;
            };
          };
          >.smt{
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            text-align: left;
            >input[type="button"] {
              width: 36px;
              text-align: center;
              line-height: 35px;
              font-size: 15px;
              border: none;
              background-color: #f7f7f7;
            }
          };
        }
        >.select {
          >.t {
            font-size: 14px;
            padding: 10px 10px 0px 10px;
          };
          >.c{
            >dl{
              width: 100%;
              display: table;
              padding: 0 10px 10px 0;
              box-sizing: border-box;
              >dd{
                width: 25%;
                float: left;
                display: table-cell;
                box-sizing: border-box;
                padding: 10px 0 0 10px;
                >a{
                  display: block;
                  border-radius: 3px;
                  border: 1px solid #eaeaea;
                  color: #5a5a5a;
                  text-align: center;
                  line-height: 30px;
                  font-size: 12px;
                };
                >.on {
                  color: #fff;
                  background-color: #ff841d;
                }
              };

            };
          };
        };
      };


    };
    >.l-bottom {
      padding: 6px 0px;
      background-color: #f1f1f1;
      >ul {
        width: 98%;
        margin: 0px auto;
        >li{
          float: left;
          width: 50%;
          >a{
            display: block;
            margin: 4px;
            background-color: #fff;
            >.pic {
              width: 100%;
              height: auto;
              text-align: center;
              overflow: hidden;
              >img {
                //max-width: 100%;
                //height: auto;
              }
            };
            >.title {
              color: #333333;
              word-break: break-all;
              padding: 0 6px;
              height: 14px;
              overflow: hidden;
              font-size: 12px;
              margin-top: 10px;
              line-height: 14px;
              font-weight: normal;
              text-align: left;
              margin-top: 6px;
            };
            >.other {
              padding: 6px;
              height: 36px;
              >.price {
                float: left;
                color: #f8601d;
                font-size: 20px;
                >em {
                  font-style: normal;
                  font-size: 10px;
                  color: #f8601d;
                };
              };
              >.btn {
                float: right;
                font-size: 14px;
                color: #FFFFFF;
                border-radius: 3px;
                background-color: #ff9501;
                padding: 4px 10px;
                text-decoration: none;
                display: inline-block;
              };
            };
          };
        };
      };
    };
  };
};

